<!--
 * @Descripttion: 
 * @version: 
 * @Author: weni09
 * @Date: 2021-04-19 13:54:39
 * @LastEditors: weni09
 * @LastEditTime: 2021-06-17 15:46:06
 * @FilePath: \icoder-frontend\blog\src\components\Tag.vue
-->
<template>
	<div class="text item-tag side-card">
		<el-card class="box-card">
		<div slot="header" class="align-items-center clearfix">
		<span class="iconfont icon-tag"> </span>
		{{$t('tag.tags')}}
		</div>
		<el-tag
		size="medium"
		effect="light"
		v-for="(item,index) in tags" 
		:key="index" 
		:type="item.type"
		:title="getTagTittle(item.art_total)"
		class="tag-item"
		@click="clickSendInfo(item.slug,$event)"
		>
		<!-- <router-link :to="`/tag/${item.slug}`">{{ item.name }}</router-link> -->
		{{ item.name }}
		</el-tag>
		</el-card>
	</div>
</template>

<script>
	import { fetchTags,fetchArticleList } from "api";
	import { mapActions } from 'vuex';
	export default {
		name: 'tag',
    data(){
		return{
			tags:[],
		}
	},
	// props:{
	// 	articleList:{
	// 		type:Array,
	// 		default:[]
	// 	}
	// },

	computed:{

		//计算标签下的文章数
		getTagTittle:()=>{
			return function(num){
			let total = this.$i18n.messages[this.$i18n.locale].home.total
			let piece = this.$i18n.messages[this.$i18n.locale].home.piece
			return  total + '【'+ num + '】' + piece
			}
		},

	},
	// 监听,当路由发生变化的时候执行
	watch: {
	$route(to,from){
		this.fetchArticleByTag(to.params.slug);
  	}
	},
	methods: {
	...mapActions(['setHasNextPage']),
	fetchTags() {
            fetchTags().then(res => {
                this.tags = res.data || []
				// console.log(this.tags)
				let slug = this.$route.params.slug;
				for (let index =0;index<this.tags.length;index++){
					// 给标签分配颜色
					this.getTagColor(index)
					//如果当前已经在标签页面，获取标签名传给父组件
					if (slug && this.$route.params.res == 'tag' 
							 && this.tags[index].slug == slug){
						// console.log(this.tags[index].name)
						this.$emit('getResNameF',this.tags[index].name);
					}
				}
            }).catch(err => {
                console.log(err)
            })
        },
		//生成标签颜色
		getTagColor(index) {
			switch (index % 5){
				case 0:
					this.tags[index].type = '';
					break;
				case 1:
					this.tags[index].type = 'success';
					break;
				case 2:
					this.tags[index].type = 'info';
					break;
				case 3:
					this.tags[index].type = 'warning';
					break;
				default:
					this.tags[index].type = 'danger';
			}
		},
		
		//方法：将当前标签的名字传给父组件(根据路由中的参数slug),由点击事件触发。
		getTagName(){
			let slug = this.$route.params.slug;
			for (let index =0;index<this.tags.length;index++){
					if (this.tags[index].slug == slug){
						// console.log(this.tags[index].name)
						this.$emit('getResNameF',this.tags[index].name);
						break;
					}
				}
		},
		//通过标签查询文章传给父组件
		fetchArticleByTag(slug){
			// console.log(this.$route)
			let params = {
				res: this.$route.params.res,
				slug: slug,
				sort: '-create_date'
			}
			 fetchArticleList(params).then(res => {
                let articleTagData = res || [];
				// console.log("articleTagList, "+articleTagList);
				// setDateFormat(articleTagList)
				// console.log("tag",res)
				if (JSON.stringify(articleTagData.data) == "{}" || articleTagData.data.length < 10){
					this.setHasNextPage(false)
				}
				else{
					this.setHasNextPage(true)
				}
				this.$emit('getArticleByResF',articleTagData);
            }
			).catch(err => {
                console.log(err)
            })
		},
		//通过点击事件传给组件的信息
		clickSendInfo(slug,event){
			let el = event.currentTarget;
			this.$emit('getResNameF',el.innerHTML);
			this.$router.push(`/articles/tag/${slug}`);
			
			// this.fetchArticleByTag(slug);
		},

		initTagArticles(){
		this.fetchTags();
		//初始化数据,创建时判断当前是否是标签页，才执行查找接口
		// console.log("fetchArticleByTag: ",_this.$route)
		if(this.$route.params.res == 'tag'){
			this.fetchArticleByTag(this.$route.params.slug);
		}
		},

	},
	mounted(){
		this.initTagArticles();
	},
	created(){
		
	},

}
</script>

<style lang="scss" scoped>



</style>